<template>
  <div class="main">
    <div class="boxleft">
      <div class="box">
        <div class="left">
          <div class="gdan">
            <h4>工单统计</h4>
            <span>{{time4}}~{{month}}</span>
          </div>
          <div class="box2">
            <div class="gdanbottom">
              <div class="classbom">
                <h2>{{total}}</h2>
                <span>工单总数(个)</span>
              </div>
            </div>
            <div class="gdanbottom">
              <div class="classbom">
                <h2>{{completedTotal}}</h2>
                <span>完成工单(个)</span>
              </div>
            </div>
            <div class="gdanbottom">
              <div class="classbom">
                <h2>{{progressTotal}}</h2>
                <span>进行工单(个)</span>
              </div>
            </div>
            <div class="gdanbottom">
              <div class="classbom">
                <h2>{{cancelTotal}}</h2>
                <span>取消工单(个)</span>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="gdan">
            <h4>销售统计</h4>
            <span>{{time4}}~{{month}}</span>
          </div>
          <div class="box2">
            <div class="gdanbottom">
              <div class="classbom">
                <h2>{{Summary}}</h2>
                <span>订单量(个)</span>
              </div>
            </div>
            <div class="gdanbottom">
              <div class="classbom">
                <h2>{{Amount}}</h2>
                <span>销售额(万元)</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="hhh">
          <div class="box5">
            <div class="boxs">
              <h4>销售数据</h4>
              <span>{{endmouth}}~{{month}}</span>
            </div>
            <div class="boxb">
              <el-tabs @tab-click="handleClick">
                <el-tab-pane :label="item" v-for="(item,index) in list" :key="index"></el-tab-pane>
              </el-tabs>
            </div>
          </div>
          <div class="each">
            <div class="box6" ref="box1"></div>
            <div class="box7" ref="box2"></div>
          </div>
          <div class="box8"></div>
        </div>
      </div>
    </div>
    <div class="boxright">
      <div class="gdan">
        <h4>商品热榜</h4>
        <span>{{time4}}~{{month}}</span>
      </div>
      <div class="paihban">
        <div class="el-row" v-for="(item,index) in top" :key="index">
          <div
            class="top"
            :class="{iconbg1:index===0,iconbg2:index===1,iconbg3:index===2,iconbg4:index>2}"
          >
            <span>{{index + 1}}</span>
          </div>
          <div class="title">
            <div class="sku-name">{{item.skuName}}</div>
          </div>
          <div class="coutnbo">
            <div class="count">{{item.count}}单</div>
          </div>
        </div>
      </div>
    </div>
    <div class="boxbottom">
      <div class="bomleft">
        <div class="box4">
          <h4>合作商点位数Top5</h4>
          <i class="el-icon-chat-dot-round"></i>
        </div>
          <el-empty
          v-if="show"
          image="https://likede2-admin.itheima.net/img/empty.87c4f71b.png"
          description="暂无数据"
        ></el-empty>
        <div class="box88" v-else>
          <div class="box9" ref="box3"></div>
          <div class="box10">
            <div class="dwei">
              <p>{{counts}}</p>
              <span>点位数</span>
            </div>
            <div class="hezs">
              <p>{{partners}}</p>
              <span>合作商数</span>
            </div>
          </div>
        </div>
      </div>
      <div class="bomright">
        <div class="box4">
          <h4>异常设备监控</h4>
          <i class="el-icon-chat-dot-round"></i>
        </div>
        <el-empty
          image="https://likede2-admin.itheima.net/img/empty.87c4f71b.png"
          description="暂无数据"
        ></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import {
  orderSummary,
  orderAmount,
  taskReportInfo,
  skuTop,
  amountCollect,
  regionCollect,
  nodeCollect,
  count,
  partner
} from '../../../api/gongdan'
export default {
  name: 'DekedeIndex',
  data () {
    return {
      show: false,
      list: ['周', '月', '年'],
      orderCount: {},
      Summary: '',
      Amount: 0,
      top: [],
      Collect: {},
      time4: '',
      end: '',
      start: '',
      cancelTotal: '',
      total: '',
      completedTotal: '',
      progressTotal: '',
      age: '',
      partners: '',
      counts: ''
    }
  },
  mounted () {
    this.amountCollect()
    this.regionCollect()
    this.nodeCollect()
  },
  created () {
    // 处理时间
    this.end = this.dateFormat('yy-mm-dd HH:MM:SS', new Date())
    const time4 = this.dateFormat('yy-mm-DD', new Date())
    this.time4 = time4
    this.start = `${this.time4} 00:00:00`
    this.month = this.dateFormat('yy-mm-dd', new Date())
    this.orderSummary()
    this.skuTop()
    this.count()
    this.partner()
  },
  computed: {
    mouth () {
      const date = new Date()
      // 年 getFullYear()：四位数字返回年份
      const year = date.getFullYear() // getFullYear()代替getYear()
      // 月 getMonth()：0 ~ 11
      const month = date.getMonth() + 1
      // 日 getDate()：(1 ~ 31)
      const day = date.getDate()
      const time = year + '-' + this.addZero(month) + '-' + this.addZero(day)
      return time
    },
    endmouth () {
      const date = new Date()
      // 年 getFullYear()：四位数字返回年份
      const year = date.getFullYear() // getFullYear()代替getYear()
      // 月 getMonth()：0 ~ 11
      const month = date.getMonth() + 1
      // 日 getDate()：(1 ~ 31)
      const day = date.getDate() - 6
      const time = year + '-' + this.addZero(month) + '-' + this.addZero(day)
      return time
    },
    stateage () {
      const date = new Date()
      // 年 getFullYear()：四位数字返回年份
      const year = date.getFullYear() // getFullYear()代替getYear()
      const time = year + '-' + '01-01'
      return time
    }
  },
  methods: {
    // 左销售数据
    myChart1 (mm, hh) {
      return {
        title: {
          text: '销售额趋势图',
          left: 'center',
          textStyle: {
            fontSize: 14,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: 'middle',
          left: '3%',
          right: '4%',
          bottom: '3%',
          height: '82%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: mm,
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              type: 'solid',
              color: '#DDD'
            }
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#333'
            }
          },
          nameTextStyle: {
            color: '#999'
          },
          splitArea: {
            show: false
          }
        },
        series: [
          {
            name: '销售额',
            type: 'line',
            data: hh,
            color: '#F58080',
            lineStyle: {
              normal: {
                width: 5,
                color: {
                  type: 'linear',
                  colorStops: [
                    {
                      offset: 0,
                      color: '#ff6c6c' // 0% 处的颜色
                    },
                    {
                      offset: 0.4,
                      color: '#ff6c6c' // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#ff6c6c' // 100% 处的颜色
                    }
                  ],
                  globalCoord: false // 缺省为 false
                },
                shadowColor: 'rgba(245,128,128, 0.5)',
                shadowBlur: 10,
                shadowOffsetY: 7
              }
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#fcc5c5' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#fff' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            },
            itemStyle: {
              normal: {
                color: '#F58080',
                borderWidth: 10,
                /* shadowColor: 'rgba(72,216,191, 0.3)',
                     shadowBlur: 100, */
                borderColor: '#F58080'
              }
            },
            smooth: true
          }
        ]
      }
    },
    // 右销售数据
    myChart2 (mm, hh) {
      return {
        title: {
          text: '销售额分布',
          left: 'center',
          textStyle: {
            fontSize: 14,
            fontWeight: 'bold'
          }
        },
        color: ['#91b0ff'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          top: 'middle',
          left: '3%',
          right: '4%',
          bottom: '3%',
          height: '82%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: mm,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            // type : 'category',
            // data : ['10','20','30','40'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        series: [
          {
            name: '销售额',
            type: 'bar',
            barWidth: '10%',
            data: hh,
            itemStyle: {
              // 柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
              normal: {
                // 柱形图圆角，初始化效果
                barBorderRadius: [5, 5, 0, 0]
              }
            }
          }
        ],
        label: {
          normal: {
            show: true,
            position: 'top',
            formatter: '{c}'
          }
        }
      }
    },
    addZero (s) {
      return s < 10 ? '0' + s : s
    },
    // 时间函数
    dateFormat (fmt, date) {
      let ret
      const opt = {
        'y+': date.getFullYear().toString(), // 年
        'm+': (date.getMonth() + 1).toString(), // 月
        'd+': date.getDate().toString(), // 日
        'H+': date.getHours().toString(), // 时
        'M+': date.getMinutes().toString(), // 分
        'S+': date.getSeconds().toString(), // 秒
        'N+': date.getMonth().toString(), // 前一个月月份
        'D+': '01' // 当月一号
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      }
      for (const k in opt) {
        ret = new RegExp('(' + k + ')').exec(fmt)
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length === 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
          )
        }
      }
      return fmt
    },
    //  工单和销售
    async orderSummary () {
      const res = await orderSummary({ start: this.start, end: this.end })
      this.Summary = res
      const val = await orderAmount({ start: this.start, end: this.end })
      this.Amount = (JSON.parse(val) / 1000000).toFixed(2)
      const ele = await taskReportInfo({ start: this.start, end: this.end })
      const total = []
      const cancelTotal = []
      const completedTotal = []
      const progressTotal = []
      ele.forEach((item) => {
        completedTotal.push(item.completedTotal)
        progressTotal.push(item.progressTotal)
        cancelTotal.push(item.cancelTotal)
        total.push(item.total)
      })
      this.total = total[0] + total[1]
      this.cancelTotal = cancelTotal[0] + cancelTotal[1]
      this.completedTotal = completedTotal[0] + completedTotal[1]
      this.progressTotal = progressTotal[0] + progressTotal[1]
    },
    // 商品热榜
    async skuTop () {
      const res = await skuTop({
        start: this.time4,
        end: this.month,
        topValue: 10
      })
      // console.log(res)
      this.top = res
    },
    // 左销售数据
    async amountCollect () {
      const myChart1 = echarts.init(this.$refs.box1)
      const res = await amountCollect({
        start: this.endmouth,
        end: this.month,
        collectType: 1
      })
      const xAxis = []
      const series = []
      const weekArrayList = [
        '星期日',
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六'
      ]
      // console.log(res.xAxis)
      // console.log(res.series)
      res.xAxis.forEach((item) => {
        const index = new Date(item).getDay()
        const week = weekArrayList[index]
        xAxis.push(week)
      })
      res.series.forEach((item) => {
        series.push((item / 100).toFixed(2))
      })
      // console.log(series)
      myChart1.setOption(this.myChart1(xAxis, series))
    },
    // 销售数据右
    async regionCollect () {
      const res = await regionCollect({
        start: this.endmouth,
        end: this.month
      })
      // console.log(res)
      const series = []
      res.series.forEach((item) => {
        series.push(item / 100)
      })
      const myChart2 = echarts.init(this.$refs.box2)
      myChart2.setOption(this.myChart2(res.xAxis, series))
    },
    // 合作商点位数Top5
    async nodeCollect () {
      const res = await nodeCollect()
      // console.log(res)
      if (res === []) {
        this.show = true
      } else {
        this.show = false
      }
      const myChart3 = echarts.init(this.$refs.box3)
      myChart3.setOption({
        tooltip: {
          show: true
        },
        series: [
          {
            type: 'pie',
            radius: ['20%', '70%'], // 控制内外圈宽度
            roseType: 'area',
            zlevel: 2,
            tooltip: {
              formatter: '{b}: {d}%'
            },
            label: {
              color: '#000',
              normal: {
                show: true,
                formatter: '{b}\n{d}%'
              }
            },
            data: res,
            color: ['#92b7ff', '#a8ffcf', '#ffc298', '#d9ffff', '#d1e0fd']
          }
        ]
      })
    },
    // 切换周月年
    async handleClick (tab, event) {
      // console.log(tab.label)
      this.age = tab.label
      if (this.age === '周') {
        this.amountCollect()
        this.regionCollect()
        // console.log(1)
      } else if (this.age === '月') {
        // 左
        const myChart1 = echarts.init(this.$refs.box1)
        const res = await amountCollect({
          start: this.time4,
          end: this.month,
          collectType: 1
        })
        // console.log(res)
        const series = []
        res.series.forEach((item) => {
          series.push((item / 100).toFixed(2))
        })
        const a = res.xAxis.map((item) => {
          const arr = item.split('-')
          return `${arr[1]}月${arr[2]}日`
        })
        const str = JSON.stringify(a).replaceAll('0', '')
        myChart1.setOption(this.myChart1(JSON.parse(str), series))
        // 右
        const ele = await regionCollect({
          start: this.time4,
          end: this.month
        })
        // console.log(res)
        const serie = []
        ele.series.forEach((item) => {
          serie.push(item / 100)
        })
        const myChart2 = echarts.init(this.$refs.box2)
        myChart2.setOption(this.myChart2(ele.xAxis, serie))
      } else {
        // 左
        const myChart1 = echarts.init(this.$refs.box1)
        // console.log(3)
        const res = await amountCollect({
          start: this.stateage,
          end: this.month,
          collectType: 2
        })
        // console.log(res)
        const a = res.xAxis.map((item) => {
          const arr = item.split('-')
          arr.forEach((i) => {
            // console.log(i)
            i.replace(/'0'/g, '')
          })
          const str1 = JSON.stringify(arr[1]).replaceAll('0', '')
          const str2 = JSON.parse(str1)
          return `${arr[0]}年${str2}月`
        })
        const series = []
        res.series.forEach((item) => {
          series.push((item / 100).toFixed(2))
        })
        myChart1.setOption(this.myChart1(a, series))
        // console.log(a)
        // 右
        const ele = await regionCollect({
          start: this.stateage,
          end: this.month
        })
        // console.log(res)
        const serie = []
        ele.series.forEach((item) => {
          serie.push(item / 100)
        })
        const myChart2 = echarts.init(this.$refs.box2)
        myChart2.setOption(this.myChart2(ele.xAxis, serie))
      }
    },
    // 获取点位总数
    async count () {
      const res = await count()
      // console.log(res)
      this.counts = res
    },
    // 获取合作商总数
    async partner () {
      const res = await partner()
      // console.log(res)
      this.partners = res
    }
  }
}
</script>

<style lang="less" scoped>
.main {
  position: relative;
  width: 1753px;
  .boxleft {
    width: 1270px;
    height: 538px;
    .box {
      display: flex;
      .left {
        flex: 1;
        border-radius: 15px;
        margin-right: 20px;
        height: 166px;
        background: #e9f3ff;
        background-image: url(),
          url(https://likede2-admin.itheima.net/img/task.66b715b7.png);
        background-repeat: no-repeat, no-repeat;
        background-position: 0px 0px, calc(100% - 12px) 100% !important;

        .box2 {
          display: flex;
          .gdanbottom {
            width: 160px;
            height: 107px;
            flex: 1;
            .classbom {
              display: flex;
              flex-direction: column;
              h2 {
                margin-left: 50px;
                font-size: 36px;
                margin-top: -5px;
                color: #072074;
                text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
              }
              span {
                height: 17px;
                margin-top: -24px;
                margin-left: 55px;
                font-size: 12px;
                font-weight: 400;
                color: #91a7dc;
                line-height: 17px;
              }
            }
          }
        }
      }
      .right {
        border-radius: 15px;
        flex: 1;
        height: 166px;
        background-color: #fff;
        background: #fbefe8
          url(https://likede2-admin.itheima.net/img/sale.606b0d8c.png) no-repeat
          calc(100% - 12px) 100%;
        .box2 {
          display: flex;
          .gdanbottom {
            width: 160px;
            height: 107px;
            flex: 1;
            .classbom {
              margin-left: 60px;
              display: flex;
              flex-direction: column;
              h2 {
                margin-left: 40px;
                font-size: 36px;
                margin-top: -5px;
                color: #ff5757;
                text-shadow: 2px 4px 7px rgb(255 99 85 / 50%);
              }
              span {
                height: 17px;
                margin-top: -24px;
                margin-left: 40px;
                font-size: 12px;
                font-weight: 400;
                color: #de9690;
                line-height: 17px;
              }
            }
          }
        }
      }
    }
    .bottom {
      border-radius: 15px;
      margin-top: 10px;
      height: 352px;
      width: 1270px;
      background-color: #fff;
      .hhh {
        .box5 {
          display: flex;
          justify-content: space-between;
          .boxs {
            display: flex;
            h4 {
              font-size: 16px;
              margin: 18px;
            }
            span {
              font-size: 12px;
              margin: 20px -10px 0px;
              color: #999;
            }
          }
          .boxb {
            margin-top: 20px;
            background: rgba(233, 243, 255, 0.37);
            border-radius: 10px;
            text-align: center;
            line-height: 34px;
            margin-right: 30px;
            width: 130px;
            height: 34px;
          }
        }
        .each {
          display: flex;
          margin-top: 10px;
          justify-content: space-between;
          .box6 {
            width: 620px;
            height: 300px;
          }
          .box7 {
            margin-top: 20px;
            width: 620px;
            height: 278px;
            // background-color: pink;
          }
        }
        .box8 {
          font-size: 20px;
        }
      }
    }
  }
  .boxright {
    border-radius: 15px;
    position: absolute;
    top: 0;
    right: 0;
    margin-right: 60px;
    height: 538px;
    width: 400px;
    background-color: #fff;
    .el-row {
      margin-bottom: 27px;
      margin-left: 30px;
      display: flex;
      .top {
        flex: 1;
        width: 21px;
        height: 20px;
        position: relative;
        span {
          position: absolute;
          top: 0;
          left: 0;
          font-size: 12px;
          margin-left: 5px;
          color: #8e5900;
        }
      }
      .title {
        margin-left: 20px;
        flex: 5;
      }
      .coutnbo {
        font-size: 14px;
        font-weight: 400;
        color: #737589;
        margin-right: 20px;
        flex: 1;
      }
    }
  }
  .boxbottom {
    position: relative;
    border-radius: 15px;
    margin-top: 20px;
    width: 1692px;
    height: 353px;
    // background-color: pink;
    .bomleft {
      width: 970px;
      height: 100%;
      background-color: #fff;
      border-radius: 15px;
      .box88 {
        display: flex;
        .box9 {
          width: 630px;
          height: 284px;
          // background-color: pink;
        }
        .box10 {
          width: 154px;
          height: 230px;
          background-color: #f8f8f9;
          border-top-right-radius: 25px;
          border-bottom-left-radius: 25px;
          .dwei {
            margin-top: 50px;
            margin-left: 50px;
          }
          .hezs {
            margin-left: 50px;
          }
          p {
            height: 33px;
            font-size: 24px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            display: block;
            color: #072074;
            line-height: 33px;
          }
          span {
            display: block;
            height: 17px;
            margin-top: -15px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #000412;
            line-height: 17px;
          }
        }
      }
    }
    .bomright {
      position: absolute;
      border-radius: 15px;
      top: 0;
      right: 0;
      width: 700px;
      height: 100%;
      background-color: #fff;
    }
  }
}
.box4 {
  justify-content: space-between;
  display: flex;
  h4 {
    margin-left: 25px;
    font-weight: 600;
    color: #333;
  }
  i {
    margin-top: 15px;
    margin-right: 25px;
    font-size: 20px;
    color: #84a9fe;
  }
}
.gdan {
  display: flex;
  h4 {
    font-size: 16px;
    margin: 18px;
  }
  span {
    font-size: 12px;
    margin: 20px -10px 0px;
    color: #999;
  }
}
/deep/.iconbg1 {
  padding-top: 1px;
  padding-left: 6px;
  background-image: url();
  background-repeat: no-repeat;
  span {
    display: block;
    padding-left: 1.5px;
  }
}
.iconbg2 {
  padding-top: 1px;
  padding-left: 6px;
  background-image: url();
  background-repeat: no-repeat;
  span {
    display: block;
    padding-left: 1.5px;
  }
}
.iconbg3 {
  padding-top: 1px;
  padding-left: 6px;
  background-image: url();
  background-repeat: no-repeat;
  span {
    display: block;
    padding-left: 1.5px;
  }
}
.iconbg4 {
  padding-top: 2px;
  padding-left: 4px;
  background-repeat: no-repeat;
  background-image: url();
}
</style>
<style lang="less">
.el-tabs__nav-wrap::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0px !important;
  height: 2px;
  background-color: #e4e7ed;
  z-index: 1;
}
.el-tabs__item {
  padding: 0px 15px !important;
}
.el-tabs__item.is-active {
  width: 35px;
  margin-top: 2px;
  height: 30px;
  color: #333;
  background-color: #fff;
  border-radius: 7px;
}
</style>
